<template>
  <div class="spaceTable">
    <div class="tools">
      <div class="search">
        <div class="inp">
          <el-input
            placeholder="请输入车位编号"
            v-model="searchID"
            @keydown.enter.native="toSearch"
            clearable
            class="searchInp"
          >
          </el-input>
          <el-input
            placeholder="请输入车牌号码"
            v-model="searchCarplate"
            @keydown.enter.native="toSearch"
            clearable
            class="searchInp"
            style="margin-left: 20px"
          >
          </el-input>
        </div>
        <div class="btn">
          <el-button type="primary" icon="el-icon-search" @click="toSearch"
            >搜索</el-button
          >
        </div>
      </div>
      <div class="viewport" ref="viewPort">
        <div class="hideMenu" ref="hideMenu">
          <div class="tab" @click="switchTab" ref="tab">
            <i class="el-icon-arrow-right"></i>
            <span class="selects" ref="selects">
              <span>筛选条件：</span>
              <el-select
                v-model="selectValue"
                placeholder="请选择"
                style="margin-left: 20px"
                @change="changeSelet"
              >
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </span>
          </div>
        </div>
      </div>
      <el-button type="primary" class="out_btn" @click="addSpace"
        >添加停车位</el-button
      >
    </div>
    <div class="table">
      <el-table
        :data="spaceData.slice((lazyPage - 1) * pageSize, lazyPage * pageSize)"
        stripe
        style="margin: 0 auto; width: 98%; font-size: 1rem"
        @expand-change="expandChange"
      >
        <el-table-column type="expand">
          <template slot-scope="props">
            <div class="demo-table-expand">
              <el-card class="callingCard" v-loading="props.row.loading">
                <div
                  class="privateTitle"
                  style="font-weight: 600; font-size: 1.2rem"
                >
                  私有者名片
                </div>
                <div style="margin: 5px auto; width: 18vw; text-align: center">
                  <el-form
                    label-position="left"
                    label-width="80px"
                    :model="privateData"
                  >
                    <el-form-item label="姓名">
                      <div>{{ privateData.private_name }}</div>
                    </el-form-item>
                    <el-form-item label="联系电话">
                      <div>{{ privateData.private_tel }}</div>
                    </el-form-item>
                    <el-form-item label="开启状态">
                      <div v-if="privateData.private_status">开启</div>
                      <div v-else>关闭</div>
                    </el-form-item>
                    <el-form-item label="开始时间">
                      <div>{{ privateData.private_start_time }}</div>
                    </el-form-item>
                    <el-form-item label="结束时间">
                      <div>{{ privateData.private_end_time }}</div>
                    </el-form-item>
                  </el-form>
                </div>
              </el-card>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="space_no" label="编号" width="80" min-width="80">
        </el-table-column>
        <el-table-column
          prop="car_plate"
          label="车牌号码"
          width="180"
          min-width="180"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.car_plate">
              {{ scope.row.car_plate }}
            </span>
            <span v-else> 无 </span>
            <span style="float: right">
              <el-dropdown
                @visible-change="(status) => QRchange(status, scope.row)"
              >
                <span class="el-dropdown-link">
                  二维码<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item class="el-dropdown-item">
                    <img :src="QRsrc" id="QRsrc" />
                    <el-button size="mini" v-print="'#QRsrc'"
                      ><i class="el-icon-printer el-icon--left"
                        >打印</i
                      ></el-button
                    >
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </span>
          </template>
        </el-table-column>
        <el-table-column
          prop="space_private"
          label="私有车位"
          width="140"
          min-width="140"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.space_private">
              <i
                class="el-icon-circle-check"
                style="color: #67c23a; font-size: 1.2rem"
              ></i>
            </span>
            <span v-else>
              <i
                class="el-icon-circle-close"
                style="color: #f56c6c; font-size: 1.2rem"
              ></i>
            </span>
          </template>
        </el-table-column>
        <el-table-column
          prop="space_charge_type"
          label="充电车位"
          width="140"
          min-width="140"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.space_charge_type">
              <i
                class="el-icon-circle-check"
                style="color: #67c23a; font-size: 1.2rem"
              ></i>
            </span>
            <span v-else>
              <i
                class="el-icon-circle-close"
                style="color: #f56c6c; font-size: 1.2rem"
              ></i>
            </span>
          </template>
        </el-table-column>
        <el-table-column
          prop="space_status"
          label="状态"
          width="80"
          min-width="80"
        >
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.space_status"
              active-color="#13ce66"
              inactive-color="#ff4949"
              @change="changeStatus(scope.$index, scope.row)"
            >
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column
          prop="billing_start"
          label="计时时间"
          width="200"
          min-width="200"
        >
        </el-table-column>
        <el-table-column
          prop="charging_start"
          label="充电开始时间"
          width="200"
          min-width="200"
        >
        </el-table-column>
        <el-table-column
          prop="charging_end"
          label="充电结束时间"
          width="200"
          min-width="200"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.charging_end">
              {{ scope.row.charging_end }}
            </span>
            <span v-else> 暂无 </span>
          </template>
        </el-table-column>
        <el-table-column
          prop="charging_power"
          label="充电功率"
          width="200"
          min-width="200"
        >
        </el-table-column>
        <el-table-column label="备注">
          <template slot-scope="scope">
            <el-popover trigger="hover" placement="top">
              <p>备注: {{ scope.row.remarks }}</p>
              <div slot="reference" class="name-wrapper">
                <el-tag size="medium">
                  <span v-if="scope.row.remarks == null">无</span>
                  <span v-else
                    >{{ scope.row.remarks.slice(0, 3) }}
                  </span></el-tag
                >
              </div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" width="160" min-width="160">
          <template slot-scope="scope">
            <el-button size="mini" @click="Edit(scope.$index, scope.row)"
              >编辑</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="Delete(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination">
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-size="pageSize"
        layout="prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { PageHeight } from "../utils/PageHeight";
import Qs from "qs";

export default {
  name: "SpaceTable",
  inject: ["spaceRefresh"],
  data() {
    return {
      openTab: false,
      pageSize: 3,
      options: [
        {
          value: "公共车位",
          label: "公共车位",
        },
        {
          value: "无",
          label: "无",
        },
      ],
      selectValue: "无",
      spaceData: [
        {
          space_id: 1,
          space_no: 1,
          car_plate: "",
          space_private: true,
          space_charge_type: true,
          space_status: true,
          billing_start: "",
          charging_start: "",
          charging_end: "",
          charging_power: "",
          remarks: null,
        },
      ],
      privateData: {
        private_id: 1,
        private_name: "",
        private_tel: "",
        private_status: true,
        private_start_time: "",
        private_end_time: "",
      },
      searchID: "",
      searchCarplate: "",
      currentPage_old: 1,
      currentPage: 1,
      total: 0,
      QRsrc: "",
    };
  },

  mounted() {
    const height = window.innerHeight;
    this.pageSize = PageHeight(height);
    this.getPrivateList();
  },
  computed: {
    lazyPage: function () {
      if (this.currentPage < 4) {
        return this.currentPage;
      } else {
        return this.currentPage % 3 === 0 ? 3 : this.currentPage % 3;
      }
    },
  },
  methods: {
    //获取停车位列表
    getPrivateList() {
      this.axios
        .get("/space/spaceList", {
          params: {
            page: 1,
            count: this.pageSize * 3,
          },
        })
        .then((res) => {
          if (res.data.code === "200") {
            this.spaceData = res.data.data.list;
            this.total = res.data.data.total;
            this.$emit("getSpaceData", this.spaceData);
          } else {
            this.$message.error(res.data.msg);
          }
        })
        .catch((err) => {
          console.error(err);
          this.$message.error("获取停车位列表失败");
        });
    },
    //刷新页面
    pageRefresh() {
      this.spaceRefresh();
    },
    //展开行
    expandChange(row, expandedRows) {
      this.$set(row, "loading", true);
      const spaceId = row.space_id;
      this.axios
        .get("/space/privateInfo", {
          params: {
            spaceId,
          },
        })
        .then((res) => {
          if (res.data.data !== null) {
            this.privateData = res.data.data;

            this.$set(row, "loading", false);
          } else {
            this.$message.error("该车位下没有私有者");
          }
        })
        .catch((err) => {
          console.error(err);
          this.$message.error("获取该停车位下私有者信息失败");
        });
    },
    switchTab() {
      const viewPort = this.$refs.viewPort;
      const tab = this.$refs.tab;
      const hideMenu = this.$refs.hideMenu;
      const select = this.$refs.selects;
      const openTab = this.openTab;
      if (openTab) {
        hideMenu.classList.remove("open");
        viewPort.classList.remove("open");
        tab.classList.remove("open");
        select.style.display = "none";
        this.openTab = false;
      } else {
        hideMenu.classList.add("open");
        viewPort.classList.add("open");
        tab.classList.add("open");
        select.style.display = "inline";
        this.openTab = true;
      }
    },
    //条件筛选
    changeSelet() {
      if (this.selectValue === "公共车位") {
        this.axios
          .get("/space/spacePublicLists")
          .then((res) => {
            if (res.data.code === "200") {
              this.spaceData = res.data.data.list;
              this.$emit("getSpaceData", this.spaceData);
            } else {
              this.$message.error(res.data.msg);
            }
          })
          .catch((err) => {
            console.error(err);
            this.$message.error("获取公共停车位列表失败");
          });
      } else {
        this.getPrivateList();
      }
    },
    //添加
    addSpace() {
      this.$router.push("/space/add");
    },
    Edit(index, row) {
      this.$router.push("/space/edit/no=" + row.space_no);
    },
    //删除
    Delete(index, row) {
      this.$confirm("此操作将删除该停车位信息, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          const spaceId = row.space_id;
          this.axios
            .post(
              "/space/deleteSpace",
              Qs.stringify({
                spaceId,
              })
            )
            .then((res) => {
              if (res.data.code === "200") {
                this.$message({
                  message: res.data.msg,
                  type: "success",
                });
                this.pageRefresh();
              } else {
                this.$message.error(res.data.msg);
              }
            })
            .catch((err) => {
              console.error(err);
              this.$message.error("删除停车车位失败");
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    toSearch() {
      const spaceNo = this.searchID;
      const carPlate = this.searchCarplate;
      spaceNo == "" && carPlate == "" ? this.pageRefresh() : null;
      let sendData = null;
      if (spaceNo == "") {
        sendData = {
          carPlate,
        };
      } else if (carPlate == "") {
        sendData = {
          spaceNo,
        };
      } else {
        sendData = {
          spaceNo,
          carPlate,
        };
      }
      this.axios
        .get("/space/searchSpace", {
          params: sendData,
        })
        .then((res) => {
          this.spaceData = res.data.data.list;
        })
        .catch((err) => {
          this.$message.error("搜索停车位失败");
          console.error(err);
        });
    },
    //修改停车位状态
    changeStatus(index, row) {
      const spaceId = row.space_id;
      const status = row.space_status;
      this.axios
        .post(
          "/space/changeStatus",
          Qs.stringify({
            spaceId,
            status,
          })
        )
        .then((res) => {
          if (res.data.code === "200") {
            this.$message({
              message: res.data.msg,
              type: "success",
            });
          } else {
            this.$message.error(res.data.msg);
            this.pageRefresh();
          }
        })
        .catch((err) => {
          console.error(err);
          this.$message.error("修改停车位状态失败");
        });
    },
    //分页函数
    handleCurrentChange(val) {
      this.currentPage = val;
      if (Math.ceil(this.currentPage_old / 3) !== Math.ceil(val / 3)) {
        this.currentPage_old = val;
        this.pageLoad("/space/spaceList", val, 3, this.pageSize * 3)
          .then((res) => {
            this.spaceData = res.data.data.list;
          })
          .catch((err) => {
            console.error(err);
            this.$message.error(`获取停车位列表-第${val}页失败`);
          });
      }
    },
    //触发获取二维码
    QRchange(status, row) {
      if (status) {
        const spaceId = row.space_id;
        this.axios
          .get("/QR/getQrCode", {
            params: {
              spaceId,
            },
          })
          .then((res) => {
            this.QRsrc = res.data.data;
          });
      }
    },
  },
  watch: {
    $route: {
      handler(val) {
        const companyName = val.query.search;
        if (companyName !== undefined) {
          this.searchCompany(companyName);
        }
      },
      deep: true,
    },
  },
};
</script>

<style scoped>
.tools {
  position: relative;
  width: 100%;
  height: 40px;
}
.viewport {
  position: absolute;
  top: 50%;
  left: 48%;
  transform: translate(0%, -50%);
  width: 280px;
  height: 40px;
  transition: all 1s ease;
}
.viewport.open {
  width: 380px;
  transition: all 1s ease;
}
.hideMenu {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(0%, -50%);
  width: 20px;
  height: 40px;
  transition: all 1s ease;
}
.hideMenu.open {
  width: 380px;
}
.tab {
  width: 40px;
  border-radius: 50%;
  line-height: 40px;
  background-color: #58a9fa;
  transition: all 1s ease;
}
.tab.open {
  background-color: transparent;
  transition: all 0.1s ease;
}
.tab i {
  cursor: pointer;
  color: #ebebeb;
}
.tab:hover {
  cursor: pointer;
}

.tab:hover i {
  color: #ffffff;
}
.tab.open i {
  transform: translateX(360px) rotate(180deg);
  transition: all 0.5s ease;
  color: #606266;
}
.selects {
  display: none;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(0%, -50%);
}

.out_btn {
  position: absolute;
  top: 50%;
  right: 30px;
  transform: translate(0%, -50%);
}
.table {
  margin-top: 15px;
  width: 100%;
  height: 65vh;
}
.pagination {
  float: right;
  width: 50%;
  height: 5vh;
}
.table /deep/ .el-table__body-wrapper::-webkit-scrollbar {
  height: 8px;
}
.table /deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
  background-color: #83b7eb;
  border-radius: 5px;
}
.table /deep/ .el-table__body-wrapper::-webkit-scrollbar-track-piece {
  background-color: #e6e6e6;
}
.table /deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb:hover {
  background-color: #2979c9;
}

.table /deep/ .el-table__fixed,
.table /deep/ .el-table__fixed-right {
  height: calc(100% - 7px) !important;
  box-shadow: -5px -2px 10px rgba(0, 0, 0, 0.12) !important;
}
.table /deep/ .el-table__fixed-body-wrapper {
  height: calc(100% - 36px) !important;
}

.table
  /deep/
  .el-table__body-wrapper.is-scrolling-none
  ~ .el-table__fixed-right {
  height: 100% !important;
  bottom: 0 !important;
  box-shadow: none !important;
}

.table /deep/ .el-table--scrollable-y .el-table__fixed-right {
  bottom: 7px !important;
}

.el-table--scrollable-x:not(.el-table--scrollable-y) .el-table__fixed-right {
  bottom: 0 !important;
}

.table /deep/.el-table th > .cell {
  text-align: center;
}

.table /deep/.el-table .cell {
  text-align: center;
}
.table /deep/ .row-expand-cover .el-table__expand-icon {
  visibility: hidden;
}
.table /deep/ .el-tag {
  font-size: 1rem;
}
.callingCard {
  margin: 0 auto;
  padding: 0 30px 0 30px;
  transform: translate(-50%, 0);
  width: 580px;
  height: 47vh;
  background: url(../assets/image/callingCard.png) no-repeat;
  background-size: 100% 100%;
}
.privateTitle {
  text-align: center;
}
.callingCard .el-form-item {
  margin-bottom: 0px;
}
.callingCard >>> .el-form-item__label {
  font-weight: 550;
}
.callingCard >>> .el-form-item__content {
  color: #000000;
}
.search {
  position: absolute;
  top: 50%;
  left: 30px;
  transform: translate(0%, -50%);
  width: 50%;
  height: 100%;
}

.inp {
  float: left;
  width: 70%;
}

.btn {
  float: left;
  margin-left: 20px;
}
.searchInp {
  float: left;
  width: 45%;
  height: 100%;
}
.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
  font-size: 0.8rem;
}
.el-dropdown-item {
  width: 155px;
  height: 165px;
  text-align: center;
}
.el-dropdown-item:hover {
  cursor: default;
  background-color: #ffffff;
}
.el-dropdown-item img {
  padding: 0;
  width: 120px;
  height: 120px;
  border: 0;
}
</style>